<!DOCTYPE html>
<html>
<head>
    <title>Electromagnetic Field Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="400"></canvas>
    <script>
        window.onload = function() {
            const canvas = document.getElementById('physicsCanvas');
            const ctx = canvas.getContext('2d');

            // Style settings
            ctx.strokeStyle = 'black';
            ctx.fillStyle = 'black';
            ctx.lineWidth = 1.5;
            ctx.font = "italic 20px 'Times New Roman'";

            // Centerline
            const centerY = 150;
            ctx.beginPath();
            ctx.moveTo(20, centerY);
            ctx.lineTo(580, centerY);
            ctx.stroke();

            // Coil B (large coil on the left)
            const xB = 150;
            const radiusB_v = 90; // vertical radius
            const radiusB_h = 30; // horizontal radius
            ctx.beginPath();
            ctx.ellipse(xB, centerY, radiusB_h, radiusB_v, 0, 0, 2 * Math.PI);
            ctx.stroke();

            // Radius line for b
            ctx.beginPath();
            ctx.moveTo(xB, centerY);
            ctx.lineTo(xB + radiusB_h * Math.cos(-Math.PI/4), centerY + radiusB_v * Math.sin(-Math.PI/4));
            ctx.stroke();
            ctx.fillText('b', xB + 10, centerY - 40);
            
            // Label for B
            ctx.font = "22px 'Times New Roman'";
            ctx.fillText('B', xB + radiusB_h + 10, centerY + radiusB_v - 15);
            ctx.font = "italic 20px 'Times New Roman'";


            // Coil A (small coil on the right)
            const xA = 480;
            const radiusA_v = 40; // vertical radius
            const radiusA_h = 15; // horizontal radius
            ctx.beginPath();
            ctx.ellipse(xA, centerY, radiusA_h, radiusA_v, 0, 0, 2 * Math.PI);
            ctx.stroke();

            // Radius line for a
            ctx.beginPath();
            ctx.moveTo(xA, centerY);
            ctx.lineTo(xA + radiusA_h * Math.cos(-Math.PI/4), centerY + radiusA_v * Math.sin(-Math.PI/4));
            ctx.stroke();
            ctx.fillText('a', xA + 10, centerY - 15);

            // Label for A
            ctx.font = "22px 'Times New Roman'";
            ctx.fillText('A', xA + radiusA_h + 5, centerY + radiusA_v - 5);
            ctx.font = "italic 20px 'Times New Roman'";


            // Distance measurement line for l
            const yDimLine = 280;
            const yDimStart = centerY + radiusB_v + 10; // Start below the larger coil B

            ctx.beginPath();
            // Vertical line from below B
            ctx.moveTo(xB, yDimStart);
            ctx.lineTo(xB, yDimLine);

            // Vertical line from below A
            // We use the same y-start position for visual consistency, even though A is smaller.
            // The original image seems to have uneven vertical lines starting right below each loop.
            const yDimStartA = centerY + radiusA_v + 10;
            ctx.moveTo(xA, yDimStartA);
            ctx.lineTo(xA, yDimLine);

            // Horizontal line with arrows
            const arrowSize = 10;
            ctx.moveTo(xB, yDimLine);
            ctx.lineTo(xA, yDimLine);
            // Left arrow head
            ctx.moveTo(xB + arrowSize, yDimLine - arrowSize/2);
            ctx.lineTo(xB, yDimLine);
            ctx.lineTo(xB + arrowSize, yDimLine + arrowSize/2);
            // Right arrow head
            ctx.moveTo(xA - arrowSize, yDimLine - arrowSize/2);
            ctx.lineTo(xA, yDimLine);
            ctx.lineTo(xA - arrowSize, yDimLine + arrowSize/2);
            ctx.stroke();

            // Label for l
            ctx.fillText('l', (xB + xA) / 2, yDimLine - 10);

            // Chinese Text Label
            ctx.font = "24px 'KaiTi', 'SimSun'";
            ctx.textAlign = 'center';
            ctx.fillText('习题 9-26 图', canvas.width / 2, 360);
        };
    </script>
</body>
</html>